<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>绝对定位</title>
        <style>
            div {
                width: 100px;
                height: 100px;
                border: 1px solid red;
            }
            #d1 {
                /* 设置绝对定位,对照物默认为窗口 */
                position: absolute;
                top: 0;
                right: 0;
            }
            #big {
                /* 这个元素设置相对定位后,其所有的后代元素可以通过绝对定位来设置位置,对照物为这个元素 */
                position: relative; /* 做参照物 */
                width: 200px;
                height: 200px;
                margin: 100px 0 0 100px;
                background-color: green;
            }
            #big > div {
                width: 100px;
                height: 100px;
                background-color: blue;
                margin: 50px 0 0 50px;
            }
            #big > div > div {
                width: 50px;
                height: 50px;
                background-color: red;
                /* 绝对定位,其上级元素添加了相对定位后,可以参照上级元素位置来定位 */
                position: absolute;
                top: 0;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div id="big">
            <div>
                <div></div>
            </div>
        </div>
        <div id="d1">div1</div>
        <div>div2</div>
        <div>div3</div>
    </body>
</html>
